Include navigation in mockups 在 Mockup 中加入導航結構
常用的導航型別
導航欄 Navigation bar
顯示頁面連結的橫條或豎條,一般在頂部或側邊。
什麼時候用:頁面不多或功能簡單的網站,比如個人作品集。
好處:一目瞭然,使用者能直接看到所有主要頁面。
小建議:用顏色、加粗或下劃線標出當前頁面,讓使用者知道自己在哪裡。
標籤欄 Tab bar
可以切換的選項卡,可以是圖示、文字或兩者結合。
什麼時候用:需要分類顯示內容但又不想跳轉頁面,比如設定頁面、音樂播放器。
好處:頁面保持簡潔,使用者專注看當前內容。
小建議:用下劃線或高亮顏色標出當前選中的標籤。
漢堡選單 Navigation menu
點選三條橫線圖示後展開的隱藏選單。
什麼時候用:手機介面或功能很多的產品。
好處:節省空間,主介面更整潔。
小建議:圖示位置要固定,通常放在左上角或右上角,方便使用者找到。
導航中心 Navigation hub
所有連結都在主頁顯示,去其他頁面要先回到主頁。
什麼時候用:頁面少、操作簡單的應用。
好處:減少思考負擔,讓使用者專心完成當前任務。
小建議:每個頁面都加上"返回主頁"按鈕,避免使用者迷路。
導航包含哪些元素
按鈕
作用:執行操作或跳轉頁面。
樣式:可以是圖形按鈕、文字按鈕,或帶動畫、陰影的可點選區域。
圖示
作用:快速表達功能,節省空間。
例子:主頁、郵箱、搜尋、設定。
設計小技巧:讓使用者知道可以點選
"可感知性"是指讓使用者一眼就能看出某個元素可以點選。比如帶陰影或下劃線的文字,會讓人覺得"這個應該可以點"。
給按鈕加上邊框、背景色、漸變等,讓它更明顯。圖示要統一,不要讓使用者搞混。點選時提供反饋(比如變色),讓使用者更有信心